<template>
    <div class="outcontainer">
        <Breadcrumb :items="['系统管理', '用户权限设置']" />
        <div class="container">
            <div class="left-side">
                <a-grid :cols="24" :row-gap="16">
                    <a-grid-item class="panel" :span="24">
                        <a-card class="general-card" title="用户列表" :header-style="{ paddingBottom: 0 }"
                            :body-style="{ paddingTop: 0 }" style="height: 632px">
                            <a-row>
                                <a-table :data="userList" :pagination="false" :bordered="false" :stripe="false"
                                    :scrollbar="true" style="margin-top: 10px;height: 450px">
                                    <template #columns>
                                        <a-table-column title="用户名" align="left" ellipsis tooltip
                                            data-index="realName"></a-table-column>
                                        <a-table-column title="手机号" align="center" ellipsis tooltip
                                            data-index="phone"></a-table-column>
                                        <a-table-column title="角色" align="center" ellipsis tooltip
                                            data-index="userRole"></a-table-column>
                                        <a-table-column title="操作" align="center" :width="200" fixed="right">
                                            <template #cell="{ record }">
                                                <a-button type="outline" status="success" shape="round" size="mini"
                                                    @click="editItem(record)">
                                                    <template #default>角色设置</template>
                                                </a-button>
                                                <a-button type="outline" style="margin-left: 16px;" status="warning" shape="round" size="mini"
                                                    @click="editItem(record)">
                                                    <template #default>权限设置</template>
                                                </a-button>
                                            </template>
                                        </a-table-column>
                                    </template>
                                </a-table>
                            </a-row>
                        </a-card>

                    </a-grid-item>
                </a-grid>
            </div>
            <div class="right-side">
                <a-grid :cols="24" :row-gap="16">
                    <a-grid-item class="panel" :span="24">
                        <a-card class="general-card" title="权限清单" :header-style="{ paddingBottom: 0 }"
                            :body-style="{ paddingTop: 0 }" style="height: 632px">
                            <a-row>
                                <a-table :data="quanxianList" :pagination="false" :bordered="false" :stripe="false"
                                    :scrollbar="true" style="margin-top: 10px;height: 450px">
                                    <template #columns>
                                        <a-table-column title="权限名称" align="left" ellipsis tooltip
                                            data-index="permissionName"></a-table-column>
                                        <a-table-column title="权限编码" align="center" ellipsis tooltip
                                            data-index="permissionCode"></a-table-column>
                                        <a-table-column title="权限说明" align="center" ellipsis tooltip
                                            data-index="description"></a-table-column>
                                        <a-table-column title="操作" align="center" :width="100" fixed="right">
                                            <template #cell="{ record }">
                                                <a-button type="outline" status="danger" shape="round" size="mini"
                                                    @click="editItem(record)">
                                                    <template #default>删除</template>
                                                </a-button>
                                            </template>
                                        </a-table-column>
                                    </template>
                                </a-table>
                            </a-row>
                        </a-card>

                    </a-grid-item>
                </a-grid>


            </div>

        </div>
        <a-modal v-model:visible="addModalVisible" title="编辑权限" :mask-closable="false">
            <a-form :model="addForm">
                <a-form-item field="name" label="标签名">
                    <a-input v-model="addForm.name.value" style="width: 300px;" />
                </a-form-item>
                <a-form-item field="color" label="颜色">
                    <a-input v-model="addForm.color.value" style="width: 300px;" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { Modal, Message } from '@arco-design/web-vue';
import { postRequest, uploadFileRequest } from '@/api/common';
import { baseURL } from '@/api/base';
const addModalVisible = ref(false);
let addForm = {
    name: ref(""),
    color: ref("#71afe5"),
};

let userList = ref<any[]>([]);


const fetchData = async () => {
//   let res = await postRequest("dsms/hgUser/userList", {
//     pageSize:99
//   });
//   userList.value = res.list;
}
fetchData();


let quanxianList: any[] = [
        {
            "permissionCode": "管理员",
            "permissionName": "查看所有清单",
            "description": "允许用户查看所有报表数据"
        },
       
    ];
function editItem(record:any) {

}
</script>
<script lang="ts">
export default {
    name: 'quanxianManage',
};
</script>

<style scoped lang="less">
.outcontainer {
    padding: 0 20px 20px 20px;
    background-color: var(--color-fill-2);
}

.container {
    padding-bottom: 0;
    display: flex;
}

.container {
    padding-bottom: 0;
    display: flex;
}

.left-side {
    width: 680px;
}

.right-side {
    flex: 1;
    overflow: auto;
    margin-left: 16px;
}

.panel {
    background-color: var(--color-bg-2);
    border-radius: 4px;
    overflow: auto;
}

:deep(.panel-border) {
    margin-bottom: 0;
    border-bottom: 1px solid rgb(var(--gray-2));
}

.moduler-wrap {
    border-radius: 4px;
    background-color: var(--color-bg-2);

    :deep(.text) {
        font-size: 12px;
        text-align: center;
        color: rgb(var(--gray-8));
    }

    :deep(.wrapper) {
        margin-bottom: 8px;
        text-align: center;
        cursor: pointer;

        &:last-child {
            .text {
                margin-bottom: 0;
            }
        }

        &:hover {
            .icon {
                color: rgb(var(--arcoblue-6));
                background-color: #e8f3ff;
            }

            .text {
                color: rgb(var(--arcoblue-6));
            }
        }
    }

    :deep(.icon) {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-bottom: 4px;
        color: rgb(var(--dark-gray-1));
        line-height: 32px;
        font-size: 16px;
        text-align: center;
        background-color: rgb(var(--gray-1));
        border-radius: 4px;
    }
}
</style>
